import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, cardNumPartOf, namePartOf } from "../../utils/common";
import bank_cardStyleSheet from "./bank_card_styles";

import icon_86 from "../../assets/img/icon_86.png";
import icon_87 from "../../assets/img/icon_87.png";
import none_card from "../../assets/img/none_card.png";
var _styleSheet = bank_cardStyleSheet;
let Company = class Company extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bankCard: []
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '我的银行卡' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  componentDidShow() {
    this.getUserCards();
  }
  getUserCards() {
    let { userStore } = this.props.stores;
    userStore.getUserCards({
      callback: res => {
        let resArr = toJS(res);
        if (resArr) {
          this.setState({
            bankCard: resArr.items
          });
        }
      }
    });
  }
  // 删除银行卡
  onDelete(id) {
    console.error(id);
    if (!id) {
      getRuntime().showToast('参数错误~');
    }
    let { userStore } = this.props.stores;
    getRuntime().showModal('你确定要删除该银行吗？', '', () => {
      userStore.removeUserCard({
        id,
        callback: () => {
          this.getUserCards();
          getRuntime().showToast('删除银行卡成功~');
        }
      });
    });
  }
  render() {
    let { bankCard } = this.state;
    console.log(bankCard);
    return <View>
        {bankCard.length > 0 && <View style={_styleSheet["my-my_card"]}>
            <View style={_styleSheet["list-22"]}>
              {bankCard.map(item => {
            return <View key={item.id} style={_styleSheet["list-22-item"]}>
                     <Image src={icon_86} style={_styleSheet["img"]} />
                     <View style={_styleSheet["info"]}>
                       <View style={_styleSheet["list-title"]}>{item.bankName}</View>
                       <View style={_styleSheet["list-desc"]}>储蓄卡 {namePartOf(item.cardName)}</View>
                       <View style={_styleSheet["card-no"]}>{cardNumPartOf(item.cardNumber)}</View>
                     </View>
                     <Image src={icon_87} onClick={this.onDelete.bind(this, item.id)} style={_styleSheet["r"]} />
                   </View>;
          })}
            </View>
        </View>}
        {bankCard.length <= 0 && <View style={_styleSheet["my-card_none"]}>
              <View style={_styleSheet["none-info"]}>
                  <Image src={none_card} style={_styleSheet["none-icon"]} />
                  <Text style={[_styleSheet["none-title"], _styleSheet["list-desc"]]}>还没有添加银行卡哦~</Text>
              </View>
          </View>}
        <View style={_styleSheet["footer-block"]} />
        <View onClick={this.handelRouter.bind(this, '/pages/user/bank_card_add')} style={_styleSheet["page-submit"]}>+ 添加银行卡</View>
      </View>;
  }
};
Company = tslib_1.__decorate([inject("stores"), observer], Company);
export default Company;